<template>
  <div class="page-content-wrapper">
    <div class="forget-box">
      <div class="title">找回密码</div>
      <div class="toLogin" @click="toLogin()">返回登录</div>
      <ul class="nav nav-tabs tab-line">
        <li class="narrow active">
          <a href="#find_mobile" data-toggle="tab" class="active">手机号找回</a>
        </li>
        <li class="width">
          <a href="#find_mail" data-toggle="tab">邮箱找回</a>
        </li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="find_mobile">
          <form class="form-horizontal">
            <div class="form-group">
              <div class="form-label">
                <span class="star">*</span>
                <span class="label">手机号码</span>
              </div>
              <input class="col-md-8 form-control" placeholder="请输入手机号">
            </div>
            <div class="form-group">
              <label class="form-label">
                <span class="star">*</span>
                <span class="label">短信验证码</span>
              </label>
              <input class="col-md-6 form-control" placeholder="请输入短信验证码">
              <div class="sms-verify"></div>
            </div>
            <div class="button-group">
              <button class="btn btn-primary btn-block">找回密码</button>
            </div>
          </form>
        </div>
        <div class="tab-pane" id="find_mail">
          <form class="form-horizontal">
            <div class="form-group">
              <div class="form-label">
                <span class="star">*</span>
                <span class="label">邮箱</span>
              </div>
              <input class="col-md-8 form-control" placeholder="请输入邮箱号">
            </div>
            <div class="form-group">
              <label class="form-label">
                <span class="star">*</span>
                <span class="label">短信验证码</span>
              </label>
              <input class="col-md-6 form-control" placeholder="请输入短信验证码">
              <div class="sms-verify"></div>
            </div>
            <div class="button-group">
              <button class="btn btn-primary btn-block">找回密码</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    //返回登录
    toLogin() {
      this.$router.push({ path: "/" });
    }
  }
};
</script>
<style lang="scss" scoped>
$primary: #007bff;
.page-content-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 8%;
  box-sizing: border-box;
  background: url(../../static/img/register-background.png) no-repeat;
  background-size: cover;
  .forget-box {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
    top: 40%;
    transform: translateY(-50%);
    background-color: #fff;
    padding: 40px 20px;
    .title {
      font-size: 24px;
      text-align: center;
      margin-bottom: 40px;
    }
    .toLogin {
      position: absolute;
      cursor: pointer;
      right: 38px;
      top: 46px;
      color: #3a5a7a;
    }
    .nav-tabs {
      width: 360px;
      margin: 30px auto;
      li {
        width: 180px;
        text-align: center;

        a {
          width: 180px;
          display: block;
          &.active {
            color: $primary;
            border-bottom: 3px solid $primary;
          }
          &:hover {
            color: $primary;
          }
        }
      }
    }
    .tab-content {
      padding-left: 15px;
      padding-right: 15px;
      .tab-pane {
        .form-horizontal {
          .form-group {
            display: flex;
            flex-direction: row;
            margin-bottom: 22px;
            .form-label {
              box-sizing: border-box;
              width: 150px;
              text-align: right;
              height: 40px;
              line-height: 40px;
              padding-right: 15px;
              box-sizing: border-box;
              .star {
                color: red;
              }
            }
            .form-control {
              height: 40px;
              line-height: 40px;
              max-width: 450px;
            }
            .chart-verify,
            .sms-verify {
              margin-left: 10px;
              width: 80px;
              height: 40px;
              background-color: red;
            }
          }
          .button-group {
            margin-left: 23%;
            button {
              width: 70%;
            }
          }
        }
      }
    }
  }
}
</style>